{block name="resources"}
<link href="FILE_CSS/cropper/head/cropper.min.css" rel="stylesheet">
<link href="FILE_CSS/cropper/head/sitelogo.css" rel="stylesheet">
<style type="text/css">
.layui-btn .layui-icon {
    display: inline-block;
}
</style>
{/block}
<script type="text/html" id="cropper_html">
<div id="avatar-modal">
    <div >
        <div>
            <div class="avatar-form">
                    <div class="avatar-body">
                        <div class="avatar-upload">
                            <button class="layui-btn" type="button" onclick="$('input[id=avatarInput]').click();">请选择图片</button>
                            <span id="avatar-name"></span>
                            <input class="avatar-input" id="avatarInput" name="" type="file" style="display:none;"></div>

                        <div class="layui-row grid-demo">
                            <div class="layui-col-md8">
                                <div class="avatar-wrapper"></div>
                            </div>
                            <div class="layui-col-md3">
                                <div class="avatar-preview preview-lg" id="imageHead"></div>
                            </div>
                        </div>
                        <div class="layui-row grid-demo avatar-btns">
                            <div class="layui-col-md6">
                                <button class="layui-btn" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees"><i class="layui-icon layui-icon-refresh-3" ></i>向左旋转</button>
                                <button class="layui-btn" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"><i class="layui-icon layui-icon-refresh-3" ></i>向右旋转</button>
                            </div>
                            <div class="layui-col-md3" style="text-align: right;">&nbsp;</div>
                            <div class="layui-col-md2"></div>
                            <div class="layui-col-md1">
                                <button class="layui-btn avatar-save  layui-btn-sm"  title="保存图片" type="button" >
                                    <i class="layui-icon layui-icon-upload-circle" ></i>
                                    保存图片
                                </button>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>
<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
</script>

<!-- 单图上传结束 -->
<script src="FILE_JS/cropper/head/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var cropper_index{$name};
    var cropper_height = {if $param['cropper_height'] != ''|| $param['cropper_height'] > 0}{$param['cropper_height']}{else/}200{/if};
    var cropper_width = {if $param['cropper_width'] != '' || $param['cropper_width'] > 0}{$param['cropper_width']} {else/} 200 {/if};
    function openCropper{$name}(){
        layui.use('laytpl', function(){
            var laytpl = layui.laytpl;
            var tpl_html = $("#cropper_html").html();
            laytpl(tpl_html).render([], function(html){
                cropper_index{$name} = layer.open({
                    type: 1,
                    {if $param['cropper_title'] != ''}
                    title:"{$param['cropper_title']}",
                    {else/}
                    title:"头像选择",
                    {/if}
                    area: ['700px', '446px'], //宽高
                    content: html,
                    success: function(layero, index){
                         var mask = $(".layui-layer-shade");
                         mask.appendTo(layero.parent());

                         //动态加载裁剪(引入的瞬间执行)
                        jQuery.getScript("FILE_JS/cropper/head/cropper.js")
                        .done(function() {
                            jQuery.getScript("FILE_JS/cropper/head/sitelogo.js");
                        });

                        //做个下简易的验证  大小 格式
                        $('#avatarInput').on('change', function(e) {
                            var filemaxsize = 1024 * 5;//5M
                            var target = $(e.target);
                            var Size = target[0].files[0].size / 1024;
                            if(Size > filemaxsize) {
                                layer.msg('图片过大，请重新选择!');
                                $(".avatar-wrapper").childre().remove;
                                return false;
                            }
                            if(!this.files[0].type.match(/image.*/)) {
                                layer.msg('请选择正确的图片!');
                            } else {
                                var filename = document.querySelector("#avatar-name");
                                var texts = document.querySelector("#avatarInput").value;
                                var teststr = texts; //你这里的路径写错了
                                testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
                                filename.innerHTML = testend;
                            }

                        });
                        //点击裁剪框
                        $(".avatar-save").on("click", function() {
                            var img_lg = document.getElementById('imageHead');
                            // 截图小的显示框内的内容
                            html2canvas(img_lg, {
                                allowTaint: true,
                                taintTest: false,
                                onrendered: function(canvas) {
                                    canvas.id = "mycanvas";
                                    //生成base64图片数据
                                    var dataUrl = canvas.toDataURL("image/jpeg");
                                    var newImg = document.createElement("img");
                                    newImg.src = dataUrl;
                                    imagesAjax{$name}(dataUrl)
                                }
                            });
                        })

                    }
                })
            })
        })
    }

    /**
     * 裁切图片上传
     * @param src
     */
    function imagesAjax{$name}(src) {
        var data = {};
        data.img = src;
        data.jid = $('#jid').val();
        $.ajax({
            url: '{:addon_url("File://common/File/cropper")}',
            data: data,
            type: "POST",
            dataType: 'json',
            success: function(data) {
                if(data.code == 0) {
                    try{
                        cropperUploadSuccess(data, "{$name}");//成功后回调函数
                        loadImgMagnify();
                        layer.close(cropper_index{$name});
                    }catch(e){
                        console.error("缺少回调函数cropperUploadSuccess()");
                    }
                }else{
                    layer.msg(data.message);

                }
            }
        });
    }
</script>